"use client";

import React, { useEffect, useState } from "react";

export function Background() {
  const [mounted, setMounted] = useState(false);

  // 确保仅在客户端渲染
  useEffect(() => {
    setMounted(true);
  }, []);

  if (!mounted) return null;

  return (
    <div className="fixed inset-0 -z-10 overflow-hidden">
      {/* 主渐变背景 */}
      <div className="absolute inset-0 bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50 dark:from-gray-950 dark:via-gray-900 dark:to-gray-950" />
      
      {/* 动态网格图案 */}
      <div className="absolute inset-0 bg-[url('/grid.svg')] bg-center [mask-image:linear-gradient(180deg,white,rgba(255,255,255,0))]" />
      
      {/* 左上装饰图形 */}
      <div className="absolute top-0 left-0 w-1/3 h-1/3 bg-gradient-to-br from-blue-300/10 to-indigo-400/10 dark:from-blue-700/10 dark:to-indigo-800/10 rounded-br-full blur-3xl" />
      
      {/* 右上装饰图形 */}
      <div className="absolute top-0 right-0 w-1/3 h-1/3 bg-gradient-to-bl from-purple-300/10 to-indigo-400/10 dark:from-purple-800/10 dark:to-indigo-900/10 rounded-bl-full blur-3xl" />
      
      {/* 底部装饰图形 */}
      <div className="absolute bottom-0 left-1/4 right-1/4 h-1/4 bg-gradient-to-t from-blue-300/10 to-transparent dark:from-blue-900/10 rounded-t-full blur-3xl" />
      
      {/* 动态光束效果 */}
      <div className="hidden md:block absolute -top-40 -right-40 h-80 w-80 rounded-full bg-indigo-500/10 dark:bg-indigo-500/5 blur-3xl animate-pulse" style={{ animationDuration: '8s' }} />
      <div className="hidden md:block absolute -bottom-40 -left-40 h-80 w-80 rounded-full bg-blue-500/10 dark:bg-blue-500/5 blur-3xl animate-pulse" style={{ animationDuration: '10s' }} />
      
      {/* 粒子效果 - 小点 */}
      <div className="absolute inset-0 overflow-hidden mix-blend-soft-light opacity-20">
        <div className="absolute h-2 w-2 rounded-full bg-blue-600 animate-float" style={{ top: '10%', left: '20%', animationDuration: '15s', animationDelay: '0s' }} />
        <div className="absolute h-2 w-2 rounded-full bg-indigo-600 animate-float" style={{ top: '30%', left: '70%', animationDuration: '20s', animationDelay: '2s' }} />
        <div className="absolute h-2 w-2 rounded-full bg-purple-600 animate-float" style={{ top: '70%', left: '15%', animationDuration: '25s', animationDelay: '4s' }} />
        <div className="absolute h-2 w-2 rounded-full bg-blue-600 animate-float" style={{ top: '60%', left: '80%', animationDuration: '18s', animationDelay: '6s' }} />
        <div className="absolute h-2 w-2 rounded-full bg-indigo-600 animate-float" style={{ top: '20%', left: '40%', animationDuration: '22s', animationDelay: '8s' }} />
        <div className="absolute h-2 w-2 rounded-full bg-purple-600 animate-float" style={{ top: '80%', left: '60%', animationDuration: '16s', animationDelay: '10s' }} />
      </div>
    </div>
  );
} 